<template>
  <div id="prize">
      <div class="content">
        <div class="box">
            <img :src="arr.prize_image" alt="" class="toux">
            <div class="ge1"></div>
            <span class="title">{{this.arr.prize_name}}</span>
            <div class="ge2"></div>
            <div class="shu"></div>
            <span class="name">奖品价值：</span>
            <span class="price">{{arr.prize_money}}</span>
            <div class="shu_a"></div>
            <span class="name_a">购买数量：</span>
            <span v-if="arr.num==null" class="price_a">0</span>
            <span class="price_a" v-else>{{arr.num.prize_num}}</span>
            <div class="mid" v-html="requestText">
            </div>
        </div>
      </div>
  </div>
</template>
<script>
import axios from 'axios'
import PullTo from 'vue-pull-to'
export default {
  name: 'example',
  components: {
    PullTo
  },
  data(){
      return{
          arr:{ },
          requestText:"",
          token:this.GLOBAL.serverSrc
      }
  },
  created(){
        this.getData()
  },
  methods: {
    getData(){
      var url=this.token+'/adv/prizeinfo';
      var obj={
        prize_id:this.$route.query.prizeid
      }
      var thet=this;
      thet.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
          let reg=new RegExp("\n","g");
          let str=response.data.data.prize_describe.replace(reg,"<br>");
          this.requestText=str;
          //console.log(thet.arr)
      })
      .catch(function(error) {
          console.log(error);
      });
    },
    refresh(loaded) {
      setTimeout(() => {
      //  this.dataList.reverse();
        loaded('done');
      }, 2000);
    }
  }
}

</script>
<style lang="scss" scoped>
#prize{
  width:100%;
  height:100%;
  position:fixed;
  background: rgb(247,247,247);
}

.content{
  width:100%;
  display:flex;
  justify-content: center;
  margin-top:0.25rem;
  .box{
    width:3.01rem;
    height:4.2rem;
    position: absolute;
    background:#FFFFFF;
    background-image: url("./img/c4.png");
    background-repeat: no-repeat;
    background-size:100% 1.33rem;
    border-radius: 0.05rem;
    position: relative;
    .toux{
      width:0.67rem;
      height:0.67rem;
      border-radius:50%;
      position: absolute;
      top:0.2rem;
      left:1.17rem;
    }
    .ge1{
      width:0.44rem;
      height:0.01rem;
      background:#FFFFFF;
      position: absolute;
      top:1.06rem;
      left:0.58rem;
    }
    .ge2{
      width:0.44rem;
      height:0.01rem;
      background:#FFFFFF;
      position: absolute;
      top:1.06rem;
      left:1.98rem;
    }
    .title{
      width:0.9rem;
      text-align: center;
      display:inline-block;
      color:#F7F7F7;
      font-size:0.12rem;
      position: absolute;
      top:0.99rem;
      left:1.03rem;
    }
    .shu{
      width:0.02rem;
      height:0.13rem;
      background:#43DCC2;
      position: absolute;
      top:1.59rem;
      left:0.11rem;
    }
    .shu_a{
      width:0.02rem;
      height:0.13rem;
      background:#43DCC2;
      position: absolute;
      top:1.92rem;
      left:0.11rem;
    }
    .name{
      color:#1B1B1B;
      font-size:0.14rem;
      position:absolute;
      top:1.59rem;
      left:0.21rem;
    }
    .name_a{
      color:#1B1B1B;
      font-size:0.14rem;
      position:absolute;
      top:1.92rem;
      left:0.21rem;
    }
    .price{
      color:#636363;
      font-size:0.14rem;
      position: absolute;
      top:1.6rem;
      left:0.88rem;
    }
    .price_a{
      color:#636363;
      font-size:0.14rem;
      position: absolute;
      top:1.93rem;
      left:0.88rem;
    }
    .mid{
      width:2.57rem;
      height:1.46rem;
      //background: plum;
      position: absolute;
      top:2.3rem;
      left:0.22rem;
      color:#636363;
      font-size:0.14rem;
    }
  }
}
</style>
